<template>
    <div class="layout">
        <div class="top-nav" ref="topNav">
            <div
                class="top-nav-item"
                @click="topNavValue = index"
                v-for="(item, index) in topNavList"
            >
                {{ item.label }}
            </div>
        </div>
        <div class="content">
            <ul
                v-infinite-scroll="load"
                class="content-list"
                :infinite-scroll-distance="10"
                :infinite-scroll-immediate="true"
                :infinite-scroll-disabled="disabled"
            >
                <li
                    v-for="i in leaveList"
                    :key="i"
                    @click="toDetail(i.leaveId, i.leaveType)"
                >
                    <div class="info">
                        <span class="header" v-if="i.leaveType == 1"
                            >请假申请</span
                        >
                        <span class="header" v-else-if="i.leaveType == 2"
                            >放行条申请</span
                        >
                        <span class="header" v-else-if="i.leaveType == 4"
                            >留宿申请</span
                        >
                        <span>{{ i.createTime }}</span>
                    </div>
                    <span
                        v-if="i.state == 16 || i.state == 22 || i.state === 4"
                    >
                        已通过
                    </span>
                    <span v-else-if="i.state === 1 || i.state === 0">
                        待审批
                    </span>
                    <span v-else-if="i.state === 15"> 未通过 </span>
                    <span v-else-if="i.state === 5">
                        家长已通过,班主任审核中
                    </span>
                    <span v-else-if="i.state === 3"> 已拒绝 </span>
                </li>
                <div
                    v-loading="loading"
                    v-if="loading"
                    style="
                        width: 40rem;
                        height: 40rem;
                        margin-top: 25rem;
                        background: #f7f7f7;
                    "
                ></div>
                <p
                    style="
                        margin-top: 10rem;
                        margin-bottom: 10rem;
                        font-size: 12rem;
                        color: #333;
                    "
                    v-show="noMore"
                >
                    没有数据了
                </p>
            </ul>
        </div>
    </div>
</template>

<script setup>
import { ref, watch, onMounted, computed } from 'vue';
import { reqAllLeave } from '@/api/parent/index';
import { useRouter } from 'vue-router';

const router = useRouter();
const topNav = ref();
const topNavValue = ref(0);
const leaveList = ref([]);
let count = 1;

onMounted(() => {
    topNav.value.children[topNavValue.value].classList.add(
        'top-nav-item-active'
    );
});

const topNavList = ref([
    {
        label: '待办',
        value: 0,
        url: 'states=1'
    },
    {
        label: '已办',
        value: 1,
        url: 'states=5&states=15&states=16&states=17&states=21&states=22&states=23&states=27&states=28&states=3&states=4&states=9&states=10&states=11&states=33'
    }
]);
// 切换后加载状态重置
const loadReset = () => {
    count = 1;
    leaveList.value = [];
    loading.value = false;
    noMore.value = false;
};

watch(topNavValue, (newTopNavValue, oldTopNavValue) => {
    loadReset();
    topNav.value.children[oldTopNavValue].classList.remove(
        'top-nav-item-active'
    );
    topNav.value.children[newTopNavValue].classList.add('top-nav-item-active');
    load();
    load();
    load();
});

const load = async () => {
    loading.value = true;
    const str =
        topNavList.value[topNavValue.value].url +
        `&pageNo=${count}&pageSize=${6}`;
    count++;
    try {
        const res = await reqAllLeave(str);
        if (res.status === '200') {
            leaveList.value.push(...res.dataList);
            loading.value = false;
            console.log(res.dataList);
            noMore.value = res.dataList.length <= 3;
        }
    } catch (err) {
        console.log(err);
    }
};

const loading = ref(false);
const noMore = ref(false);
const disabled = computed(() => loading.value || noMore.value);

const toDetail = (id, type) => {
    switch (type) {
        case 1:
            router.push({ name: 'detail-leave', params: { id } });
            break;
        case 4:
            router.push({ name: 'detail-stay', params: { id } });
            break;
        default:
            break;
    }
};
</script>

<style lang="scss" scoped>
.layout {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: start;
    .top-nav {
        width: 100%;
        height: 5%;
        display: flex;
        background-color: #eee;
        .top-nav-item {
            flex: 1;
            height: 100%;
            color: #333;
            font-size: 16rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .top-nav-item-active {
            background-color: #2ba0ff;
            color: white;
        }
    }
    .content {
        background-color: #f7f7f7;
        width: 100%;
        height: 90%;
        .content-list {
            width: 100%;
            height: 100%;
            align-self: start;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-content: flex-start;
            overflow: auto;
            > li {
                width: 100%;
                height: 10%;
                border-bottom: #ddd 1px solid;
                font-size: 15rem;
                display: flex;
                justify-content: space-between;
                color: #555;
                > div {
                    margin-left: 10rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    .header {
                        font-weight: bold;
                    }
                }
                > span {
                    margin-right: 10rem;
                    display: flex;
                    align-items: center;
                }
            }
        }
    }
}
</style>
